<template>
  <div class="w-full flex flex-wrap" v-loading="loading">
    <div
      v-for="item in list"
      :key="item.dictCode"
      class="p-24px bg-white flex items-center justify-between w-80% mx-auto b-b-1 b-b-#D8D8D8 b-b-solid"
      @click="goNews(item.infoType)"
    >
      <div class="icon-container">
        <img src="/svg/subscribe.svg" alt="" class="w-36px h-36px" />
      </div>
      <div class="flex-1 flex flex-col justify-between">
        <h4
          class="font-size-20px lh-30px mb-16px fw-500 cursor-pointer hover-color-#0749f2"
        >
          {{ item.dictLabel }}
        </h4>
        <div class="text-light">
          <span>订阅数：{{ item.subscribeUserNum }}</span>
          <span class="ml-32px"
            >订阅时间：{{ item.subscribeTime.slice(0, 10) }}</span
          >
        </div>
      </div>
      <el-button size="large" @click="cancelSubscribe(item.infoType)"
        >取消订阅</el-button
      >
    </div>
    <Empty v-if="!list.length" />
  </div>
</template>

<script setup>
import { useLoading } from "@/hooks";

const $api = inject("$api");
const { loading, setLoading } = useLoading();

const list = ref([]);
const getMySubscribe = async () => {
  setLoading(true);
  try {
    const { data } = await $api.userCenter.getMySubscribe();
    list.value = data.filter((i) => i.userSubscribeStatus);
  } finally {
    setLoading(false);
  }
};

const cancelSubscribe = async (infoType) => {
  await ElMessageBox.confirm("确定要取消订阅吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  await $api.system.toggleSubscribe({
    infoType,
    userSubscribeStatus: 0,
  });
  ElMessage.success("取消订阅成功");
  getMySubscribe();
};

const router = useRouter();
const goNews = (infoType) => {
  router.push(`/news?type=${infoType}`);
};

onMounted(() => {
  getMySubscribe();
});
</script>

<style lang="less" scoped>
.icon-container {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(
    163deg,
    rgba(0, 85, 255, 0.061) 17%,
    rgba(2, 86, 255, 0.1) 88%
  );
  margin-right: 22px;
}
</style>
